<template>
  <div class="play">
    <div class="play-header">
      <Header :courseInfo="courseInfo" />
    </div>
    <div class="play-main">
      <Main />
    </div>
    <div class="play-container">
      <Container :courseId="courseId" />
    </div>
    <div class="play-footer">
      <Footer />
    </div>
    <Review />
  </div>
</template>
<script>
export default {
  components: {
    Header: () => import('./Header.vue'),
    Main: () => import('./Main.vue'),
    Container: () => import('./Container.vue'),
    Footer: () => import('@/layout/home/components/homeFoot.vue'),
    Review: () => import('./Review.vue'),
  },
  data() {
    return {
      courseId: this.$route.query.id,
      courseInfo: {},
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    //课程详情
    async getInfo() {
      let res = await this.$store.dispatch('queryOpenApiSysCourse', {
        id: this.courseId,
      })
      this.courseInfo = res.data[0]
    },
  },
}
</script>
<style scoped lang="scss">
.play-header {
  position: relative;
  z-index: 10;
  box-shadow: 0 4px 8px 0 rgba(33, 33, 33, 0.1);
}
</style>